<template>
  <div>
    <table width="500px" height="300px" align="center">
      <tr v-for="i in list" :key="i">
        <td><button @click="getvideo(i.id)">{{ i.name }}</button></td>

      </tr>
    </table>
    <van-dialog v-model="show" title="标题" show-cance l-button>
            <video height="200px" width="350px" controls autoplay>
                <source :src="url" type="video/mp4" />
            </video>
        </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
        list: [],
        url: '',
       show: false,
    };
  },
  methods: {
    xq() {
      this.axios.get("/xq?id=" + this.id).then((res) => {
        this.list = res.data.data;
      });
      },
      getvideo(id) {
          this.axios.get('/getvideo?id=' + id)
              .then(res => {
                  this.url = res.data.data.url
                  this.show = true
        })
      }
  },
  mounted() {
      this.xq()
  },
};
</script>

<style>
</style>